<template>
  <Page>
    <DataTable url="tableMeta/list" ref="ds" pageable>
      <template #search="table">
        <Select v-model="table.params.dataSource" :datas="dataSources" placeholder="数据源" @change="table.reload()"
                style="width:120px"></Select>
        <Input type="text" v-model="table.params.title" placeholder="名称"/>
        <Input type="text" v-model="table.params.tableName" placeholder="表名"/>
      </template>
      <template #tools="table">
        <Button icon="jeicon-add" color="primary" @click="add">新增</Button>

      </template>
      <template #default="table">
        <Table ref="tb" :datas="table.data" :loading="table.loading">
          <TableItem title="ID" prop="id" :width="220"></TableItem>
          <TableItem title="名称" :width="100" prop="title"></TableItem>
          <TableItem title="数据源" :width="100" prop="dataSource"></TableItem>
          <TableItem title="表名" :width="100" prop="tableName"></TableItem>
          <TableItem title="备注" prop="memo"></TableItem>
          <TableItem title="状态" :width="120">
            <template #default="{data}">
              {{ data.enable ? '启用' : '禁用' }}
            </template>
          </TableItem>
          <TableItem :width="180" title="操作">
            <template #default="{data}">
              <LinkButtons>
                <Button @click="edit(data)">编辑</Button>
                <Button @click="changeEnable(data)">{{ data.enable ? '禁用' : '启用' }}</Button>
                <Button @click="del(data)">删除</Button>
              </LinkButtons>
            </template>
          </TableItem>
        </Table>
      </template>
    </DataTable>
  </Page>
  <!--  <Dialog href="develop/dataTableDlg.vue" ref="dlg" @dataupdate="ds.reload()" type="drawer-left" hasDivider hasCloseIcon>-->
  <!--    <template #header>数据表</template>-->
  <!--    <template #footer="dlg">-->
  <!--      <Button @click="dlg.cancel">关闭对话框</Button>-->
  <!--      <Button :loading="dlg.loading" color="primary" @click="dlg.submit">保存</Button>-->
  <!--    </template>-->
  <!--  </Dialog>-->
  <Page href="develop/dataTableDlg.vue" name="#table">

  </Page>
</template>
<script setup>
import {ajax, util, default as framework} from 'framework'
import {ref, reactive, nextTick, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {message, confirm} from 'heyui'
//status
const showSearch = ref(false), selects = ref([]), dlg = ref(null)
//const table = ajax.createDs('branch/list')
const ds = ref(null), tb = ref()

const dataSources = ref([])
ajax.post('tableMeta/dataSources').then(r => {
  dataSources.value = r.data
})

const route = useRoute()
const router = useRouter()
window.router = router
if (Object.keys(route.query).length > 0) {
  console.log("query", route.query)
}
watch(() => route.query?.id, (v) => {
  console.log(v)
  console.log(router)
  console.log(route)
})

async function add() {
  await dlg.value.open()
  ds.value.reload()
}

function edit(v) {

  router.push({query:{id:v.id},hash:'#table'})
 // await dlg.value.open({id: v.id})
 // ds.value.reload()
}

function del(v) {
  confirm({
    content: '确定删除？', async onConfirm() {
      await ajax.post('tableMeta/delete?id=' + v.id)
      ds.value.reload()
    }
  })

}

async function changeEnable(v) {
  await ajax.post('tableMeta/save', {id: v.id, enable: !v.enable})
  ds.value.reload()
}
</script>
